---
title: KeepAwake
description: A React component that prevents the screen from sleeping when rendered.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-54/packages/expo-keep-awake'
packageName: 'expo-keep-awake'
iconUrl: '/static/images/packages/expo-keep-awake.png'
platforms: ['android', 'ios', 'tvos', 'web']
---

import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { SnackInline } from '~/ui/components/Snippet';

`expo-keep-awake` provides a React hook that prevents the screen from sleeping and a pair of functions to enable this behavior imperatively.

## Installation

<APIInstallSection />

## Usage

### Example: hook

<SnackInline label='Keep Awake hook' dependencies={['expo-keep-awake']}>

```jsx
import { useKeepAwake } from 'expo-keep-awake';
import React from 'react';
import { Text, View } from 'react-native';

export default function KeepAwakeExample() {
  /* @info As long as this component is mounted, the screen will not turn off from being idle. */
  useKeepAwake();
  /* @end */
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This screen will never sleep!</Text>
    </View>
  );
}
```

</SnackInline>

### Example: functions

<SnackInline label='Keep Awake functions' dependencies={['expo-keep-awake']}>

```jsx
import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
import React from 'react';
import { Button, View } from 'react-native';

export default class KeepAwakeExample extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button onPress={this._activate} title="Activate" />
        <Button onPress={this._deactivate} title="Deactivate" />
      </View>
    );
  }

  _activate = () => {
    /* @info Screen will remain on after called until <strong>deactivateKeepAwake()</strong> is called. */ activateKeepAwake(); /* @end */
    alert('Activated!');
  };

  _deactivate = () => {
    /* @info Deactivates KeepAwake, or does nothing if it was never activated. */ deactivateKeepAwake(); /* @end */
    alert('Deactivated!');
  };
}
```

</SnackInline>

## API

```js
import * as KeepAwake from 'expo-keep-awake';
```

<APISection packageName="expo-keep-awake" apiName="KeepAwake" />
